import React, {Component} from 'react';
import {Card} from 'antd-mobile';
import Nav from '../assets/images/nav-1.png'
import {Link} from "react-router-dom";
import { CheckCircleTwoTone } from '@ant-design/icons';
import './ActorList.scss'
import http from "../util/http";


class ActorList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            ActorList: []
        }
    }
    componentDidMount() {
        http.get('api/actor/collect',this.props.pageInfo).then(({data}) => {

            console.log(data)
            if (data.code === 200) {
                const  ActorList=data.data.list;
                this.setState({
                    ActorList
                })
            } else {
                alert(data.msg)
            }
        })
    }

    renderActorList() {
        return this.state.ActorList.map(item => (
            <Link key={item.actorId} to={`/actorInfo?actorId=${item.actorId}`}>
            <Card  full={true}>
                <div className={"actor-item"}>
                    <div className="left"  >
                        <img src={process.env.REACT_APP_BASE_API + "/img/" + item.cover} alt={"图片加载失败"} />
                    </div>
                    <div className="middle">
                        <div className={"test1"}>{item.actorName}</div>
                        <div className={"test2"}>{item.birthday}</div>
                        <div className={"test2"}>{item.profile}</div>
                    </div>
                    <div className="right">
                        <CheckCircleTwoTone className={"right-icon"} spin={true} style={{fontSize:"30px"}} twoToneColor="#f6bd07" />
                    </div>
                </div>
            </Card>
            </Link>

        ))
    }


    render() {
        return (
            <div className={"Actor-hotlist"}>
                {
                    this.renderActorList()
                }

            </div>

        );
    }
}

export default ActorList;
